<template>
	<div class="padding-across-10" v-loading="loading" element-loading-text="拼命加载中">
		<div class="flex-inline">
			<headerOpreate :opreate-datas="opreateDatas" style="float: left;" v-on:executeAction="executeAction"></headerOpreate>
		</div>
		<el-table border style="width: 100%;" :data="tableData">
			<el-table-column :show-overflow-tooltip="true" type="index" align="center"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="服务名称" align="center" prop="title"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="状态" align="center">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.status === 1" type="success">正在运行</el-tag>
					<el-tag v-else type="danger">已停止</el-tag>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	let id = 1000;
	var date = new Date();
	export default {
		components: {
			headerOpreate
		},
		data() {
			return {
				loading: false,
				tableData: [],
				commandTableData: [],
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: this.$t("message.refresh"),
					action: 'reloadDatas'
				},
				// {
				// 	type: 'primary',
				// 	size: 'small',
				// 	icon: "el-icon-eleg-icon_table el-icon--left",
				// 	name: "导出表格",
				// 	action: "exportExcel"
				// }
				]
			}
		},
		props: {
			subArgs: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},

			formateDatas() {
				var result = [];
				var data = ["E004015063AEEF10","E004015063C24311","E004015063A1B6A5","E004015063A38686","E004015063A8D898","E004015063B05B5F","E004015063B8F214","E004015062CF2674","E00401506199F5A4","E004015039A9FD07","E004015062CF4F67","E0040150619A4887","E004015062D0B31D","E004015063B1322D","E004015062CF47DD","E004015063C0E521","E0040150619B2113","E004015063B03A54","E004015063B15957","E004015063A2D40B","E004015063B1595C","E004015063AF246D","E004015062D0A82F","E004015063B2B060","E004015039A9D2D0","E004015062D0B6F0","E004015063B15609","E00401506199E4C9","E00401506199E5F9","E004015062CF4F9F","E00401506FB64F30","E004015063A2D553","E004015063B147E5","E004015063B0CE9A","E004015063B0DC7B","E004015063B134AE","E00401506FB14A17","E004015063B13457","E004015063B06177","E004015063AF0CA7","E0040150619A4588","E004015063B8F3D8","E00401506FB1147C","E004015062D0888C","E004015063B0D32D","E004015063B8CF3D","E00401506FB60FB3","E004015063B8D188","E004015063B0E01B","E004015063AFE375","E004015063B123B5","E004015063B15000","E004015039A99C44","E00401506FB14EE5","E0040150619A0AA6","E004015062CF4867","E004015063A8BF78","E004015063B267EC","E004015063B04E6E","E00401506FB1C07F","E004015063A33E42","E00401506FB216F2","E004015062D0B293","E004015063A29BC3","E004015063A8C45B","E004015063B05CAB","E004015063B1332B","E004015062CF432B","E004015062D09F70","E00401506FB1AA7F","E004015039AA4891","E004015063B049B2","E004015063A2BE65","E004015063B15096","E004015063AEF247","E004015062CF47F9","E00401506199E80C","E004015039AA1CDE","E004015063A2BE68","E004015063AF0EE8"]
				for(var i = 0 ; i < data.length; i ++){
					result[i] = {};
					result[i].tag = data[i];
				}
				return result;
			},

			//导出表格
			exportExcel() {　　　　　　
				require.ensure([], () => {　　　　　　　　
					const {
						export_json_to_excel
					} = require('../../../../assets/js/vendor/Export2Excel.js');　　　　　　　　
					const tHeader = ['图书标签'];　　　　　　　　
					const filterVal = ['tag'];　　　　　　　　
					const list = this.formateDatas();　　　　　　　　
					const data = this.formatJson(filterVal, list);　　　　　　
					export_json_to_excel(tHeader, data, '图书标签信息');　　　　　　
				})　　　
			},
			formatJson(filterVal, jsonData) {　　　　　　
				return jsonData.map(v => filterVal.map(j => v[j]))　　
			},


			//删除服务
			deleteServer(row) {
				this.$confirm('此操作将删除该系统服务信息，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					HttpServer.httpGet.call(this, '/Api/Service/Delete?title='+row.title, function(response) {}, function(response) {
						if(response.data.code === 0) {
							this.getDatas();
							this.$notify({
								title: '成功',
								message: this.$t('message.deleteSuccess'),
								type: 'success',
								duration: 2500
							});
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					});
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.cancleOperation'),
						duration: 2500
					})
				});
			},
			reloadDatas() {
				this.loading = true;
				HttpServer.httpGet.call(this, '/Api/Service/List', function(response) {}, function(response) {
					this.loading = false;
					// console.log('系统服务', response);
					if(response.data.code === 0) {
						this.tableData = response.data.list;
						this.totalSize = response.data.totalcount;
						this.$notify({
							title: '成功',
							message: this.$t('message.refreshSuccess'),
							type: 'success',
							duration: 2500
						});
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			getDatas() {
				this.loading = true;
				HttpServer.httpGet.call(this, '/Api/Service/List', function(response) {}, function(response) {
					this.loading = false;
					// console.log('系统服务', response);
					if(response.data.code === 0) {
						this.tableData = response.data.list;
						this.totalSize = response.data.totalcount;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			}
		},
		created() {
			this.getDatas();
		}
	}
</script>
<style scoped lang="less">
	.name {
		color: #20a0ff;
	}
	
	.flex-inline {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
		.set-time {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	
	.el-date-editor.el-input {
		width: 130px;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>